<template>
  <div class="order-manage-container">
    <div class="order-manage-top">
      <el-row class="order-manage-top-row">
        <el-col :span="9">
          <div class="order-manage-top-col" style="padding-left:0">
            <el-date-picker style="width:100%"
              v-model="time"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholde="开始时间"
              end-placeholde="结束时间"
              size="small">
            </el-date-picker>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="order-manage-top-col">
            <span style="padding:0 5px;max-width:100px">退款状态</span>
            <el-select v-model="orderParam.after_sale" placeholder="选择退款状态" size="small">
              <el-option label="未选定" value=""></el-option>
              <el-option label="退款中" value="0"></el-option>
              <el-option label="同意退款" value="1"></el-option>
              <el-option label="拒绝退款" value="2"></el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="order-manage-top-col">
            <span style="padding:0 5px">订单状态</span>
            <el-select v-model="orderParam.status" placeholder="选择退款状态" size="small" style="max-width:150px">
              <el-option :label="item.label" :value="item.key" v-for="item in orderStatus" :key="item.key"></el-option>
            </el-select>
          </div>
        </el-col>
        <!--
        <el-col :span="5">
          <div class="order-manage-top-col">
            <span style="padding:0 5px">供应商</span>
            <el-select v-model="source" placeholder="选择退款状态" size="small" style="max-width:150px">
              <el-option label="未选定" value="-1"></el-option>
            </el-select>
          </div>
        </el-col>-->
      </el-row>
      <el-row class="order-manage-top-row" style="margin: 15px auto">
        <el-col :span="8">

        </el-col>
        <el-col :span="5">
          <div class="order-manage-top-col">
            <span style="padding:0 5px">用户ID</span>
            <el-input v-model="orderParam.user_id" placeholder="请输入" size="small" style="max-width:150px"></el-input>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="order-manage-top-col">
            <span style="padding:0 5px">商品名称</span>
            <el-input v-model="orderParam.goods_name" placeholder="请输入" size="small" style="max-width:150px"></el-input>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="order-manage-top-col">
            <span style="padding:0 5px">自提点</span>
            <!-- <el-select v-model="self" placeholder="选择自提点" size="small" style="max-width:150px">
              <el-option label="未选定" value="-1"></el-option>
            </el-select> -->
            <el-input v-model="orderParam.realname" :disabled="true" size="small"></el-input>
            <el-button type="primary" plain size="small" style="flex:1;margin-left:5px" @click="disTakeTheir = true">选择</el-button>
          </div>
        </el-col>
      </el-row>

      <el-button type="primary" size="small" style="padding:8px 20px;font-size:15px;font-weight:600" @click="page = 1; getOrder()">搜 索</el-button>


      <div>
        <el-tabs v-model="activeName" @tab-click="tabClick" class="test">
          <el-tab-pane :label="item.label" :name="item.key"
            v-for="item in tabMenuData" :key="item.key">
            <order-panel :order-data-list="orderDataList" :send-list="sendList" :name="item.label" @sendOut="getOrder()" @sendRemark="getOrder()" @sendRefund="getOrder()" @sendTakeTheir="getOrder()"/>
          </el-tab-pane>
        </el-tabs>
      </div>

      <!-- 分页 -->
      <div style="text-align:right;margin:15px 15px">
        <el-pagination class="page"
          background
          layout="total, prev, pager, next, jumper"
          :total="count"
          :page-size="10"
          :current-page="page"
          @size-change="changePage"
          @current-change="changePage">
        </el-pagination>
      </div>

    </div>

    <el-dialog :visible.sync="disTakeTheir" width="40%" title="选择自提点">
      <take-their @selectRowData="sendTakeTheir"/>
    </el-dialog>
  </div>
</template>

<script>
import OrderPanel from './components/OrderPanel'
import TakeTheir from './components/TakeTheir'
import { getOrder } from '@/api/order'
import { parseTime } from '@/utils/index'

export default {
  name: 'ordermanage',
  components: {
    OrderPanel,
    TakeTheir
  },
  data() {
    return {
      page: 1,
      count: 1,

      orderParam: {
        key: this.$store.state.app.activeApp.saa_key,
        after_sale: '',
        status: '-1',
        searchNameType: '1',
        searchName: '',
        user_id: this.$route.query.id === undefined ? '' : this.$route.query.id,
        goods_name: '',
        start_time: '',
        end_time: '',
        leader_uid: '',
        realname: '',
        page: this.page,
        limit: 10
      },

      disTakeTheir: false,

      sendList: {
          shansong: '',
          uu_is_open: '',
          dianwoda_is_open: '',
      },
      orderDataList: [{
        // id: "1969",
        // order_sn: "201909051012541839",
        // user_id: "480",
        // user_contact_id: "134",
        // total_price: "2.00",
        // is_tuan: "0",
        // express_type: "0",
        // leader_uid: "0",
        // leader_self_uid: "0",
        // tuan_status: "0",
        // express_price: "0.00",
        // payment_money: "2.00",
        // voucher_id: "0",
        // nickname: "清祀一十",
        // address: "江苏省-连云港市-海州区-德惠商务大厦B座1823-000000",
        // phone: "18261707840",
        // name: "霸霸",
        // after_sale: "-1",
        // after_type: "0",
        // after_phone: "0",
        // after_addr: null,
        // after_remark: "",
        // after_imgs: null,
        // after_express_number: null,
        // after_admin_imgs: null,
        // after_admin_remark: "",
        // order_type: "2",
        // status: "2",
        // remark: "",
        // group_admin_remark: "",
        // refund: null,
        // create_time: "2019-09-05 10:12:54",
        // voucher_price: 0,
        // province_code: null,
        // city_code: null,
        // area_code: null,
        // area_name: null,
        // addr: null,
        // realname: null,
        // leader_phone: null,
        // express_name: null,
        // express_number: null,
        // is_assemble: "0",
        // order: [{
        //   name: "测试拼团商品1",
        //   pic_url: "https://imgs.juanpao.com/goods%2F13%2F2019%2F09%2F02%2F15674081805d6cc034def13.png",
        //   goods_id: "677",
        //   property1_name: "1",
        //   property2_name: "",
        //   stock_id: "3214",
        //   number: "1",
        //   total_price: "2.00",
        //   price: "3.00",
        //   confirm_time: "",
        //   send_out_time: "",
        //   payment_money: "2.00",
        //   express_id: null,
        //   admin_remark: null
        // }],
        // province: "",
        // city: "",
        // area: ""
      }],

      orderStatus: [
        { label: '未选定', key: '' },
        { label: '待付款', key: '0' },
        { label: '待发货', key: '1' },
        { label: '已取消(24小时未支付)', key: '2' },
        { label: '已发货', key: '3' },
        { label: '已退款', key: '4' },
        { label: '退款中', key: '5' },
        { label: '待评价', key: '6' },
        { label: '已完成(评价后)', key: '7' },
        { label: '已删除', key: '8' },
        { label: '一键退款', key: '9' },
        { label: '拼团中', key: '11' },
      ],
      tabMenuData: [
        { label: '全部', key: '1', status: '-1' },
        { label: '待付款', key: '2', status: '0' },
        { label: '待发货', key: '3', status: '1' },
        { label: '已发货', key: '4', status: '3' },
        { label: '已完成', key: '5', status: '7' },
        { label: '退款中', key: '6', status: '5' },
        { label: '已关闭', key: '7', status: '8' },
      ],
      activeName: '1',
      time: '',
      self: '-1',
      source: '-1',

      pickerOptions: {
        shortcuts: [{
          text: '近7天',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start,end]);
          }
        },
        {
          text: '近30天',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start,end]);
          }
        }]
      }
    }
  },
  watch: {
    page(newPage) {
      this.orderParam.page = newPage;
    },
    time(newTime) {
      if(newTime!==null){
        this.orderParam.start_time = parseTime(newTime[0],'{y}-{m}-{d} {h}:{i}:{s}');
        this.orderParam.end_time = parseTime(newTime[1],'{y}-{m}-{d} {h}:{i}:{s}');
      }else{
        this.orderParam.start_time = '';
        this.orderParam.end_time = '';
      }
    }
  },
  mounted() {
    this.getOrder();
  },
  methods: {
    tabClick(tab) {
      this.orderParam.status = this.tabMenuData.find(item => item.label === tab.label).status;
      this.page = 1;
      this.getOrder();
    },
    /**
     * 获取订单
     */
    getOrder() {
      if(this.orderParam.status === '-1'){
        this.orderParam.status = '';
      }
      if(this.orderParam.after_sale === '-1'){
        this.orderParam.after_sale = '';
      }
      delete this.orderParam.realname;
      getOrder(this.orderParam).then(response => {
        if(response.status === 200){
          this.orderDataList = response.data;
          this.sendList = {
            shansong: response.shansong,
            uu_is_open: response.uu_is_open,
            dianwoda_is_open: response.dianwoda_is_open,
          };
          this.count = parseInt(response.count);
        }else if(response.status === 204){
          this.orderDataList = [];
          this.count = 1;
        }else{
          this.$message.error(response.message);
        }
      })
    },
    /**
     * 获取选中的自提地址数据
     */
    sendTakeTheir(data) {
      this.orderParam.leader_uid = data.uid;
      this.orderParam.realname = data.realname;
      this.disTakeTheir = false;
    },
    /**
     * 翻页
     */
    changePage(page) {
      this.page = page;
      this.getOrder();
    }
  },
}
</script>

<style lang="scss" scoped>
.order-manage-container{
  min-height: calc(100vh - 100px);
  margin: 20px;
  background-color: #fff;
  padding:25px;
  box-shadow: 0px 0px 4px 0px rgba(115, 115, 115, 0.2);
}
.order-manage-top{

}
.order-manage-top-row{
  height: 32px;
  line-height: 32px;
  text-align: center;
}
.order-manage-top-col{
  padding: 0 15px;
  max-width: 95%;
  overflow: hidden;
  display: flex;
  &>span{
    flex: 2;
    display: inline-block;
    padding: 0 5px;
    white-space: nowrap;
    overflow: hidden;
  }
  &>div{
    flex: 4
  }
}
</style>
